<template>
	<view class="detail">
		<uni-card>
			<image class="headPortrait" :src="personalInfo.headPortrait"></image>
			<view class="example-body custom-image-box">
				<text class="text">选择头像</text>
				<uni-file-picker limit="1" :del-icon="false" :auto-upload="false" disable-preview :imageStyles="{width: 64,
					height: 64,
					border: {
						radius: '50%'
					}}" @select="onSelect" file-mediatype="image">选择</uni-file-picker>
			</view>
			<view>身份：{{personalInfo.userType === 0 ? '用户' : '管理员'}}</view>
			<view>角色：{{personalInfo.roleName}}</view>
			<view @click="itemClick(1,'修改用户名')">用户名：{{personalInfo.userName}}</view>
			<view @click="itemClick(1,'修改昵称')">昵称：{{personalInfo.nickName}}</view>
			<view @click="itemClick(1,'修改性别(0:女,1:男)')">性别：{{personalInfo.sex === 0 ? '女' : '男'}}</view>
			<view @click="itemClick(0,'修改手机号')">手机号：{{personalInfo.userPhone}}</view>
			<view @click="itemClick(0,'修改身份证')">身份证：{{personalInfo.identityCard}}</view>
			<view @click="itemClick(0,'修改邮箱')">邮箱：{{personalInfo.email}}</view>
			<view>
				地址：{{personalInfo.province+personalInfo.city+personalInfo.county+personalInfo.street+personalInfo.detailAddress}}
			</view>
			<view>创建时间：{{personalInfo.createTime}}</view>
		</uni-card>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="title" :value="value" placeholder="请输入内容"
				@confirm="dialogInputConfirm" @close="closeClick"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		getPersonInfo,
		reqUpdateCommonInfo,
		reqUpdateSafeInfo,
		reqUploadImg
	} from '@/service/modules/personal';
	import {
		rsaDecrypt,
		rsaEncrypt
	} from '@/utils/rsa';
	import {
		usePersonalStore
	} from '@/store';

	const inputDialog = ref()
	const value = ref('南瓜')
	const title = ref('')
	const flag = ref(-1)
	const currentProp = ref('')

	const personalStore = usePersonalStore()
	const {
		personalInfo
	} = storeToRefs(personalStore)

	onMounted(() => {
		getDetail()
	})

	const getDetail = () => {
		personalStore.getPersonInfoAction()
	}

	const itemClick = (type, text) => {
		title.value = text
		flag.value = type
		switch (text) {
			case '修改邮箱':
				currentProp.value = 'email'
				break
			case '修改身份证':
				currentProp.value = 'identityCard'
				break
			case '修改手机号':
				currentProp.value = 'userPhone'
				break
			case '修改性别(0:女,1:男)':
				currentProp.value = 'sex'
				break
			case '修改昵称':
				currentProp.value = 'nickName'
				break
			case '修改用户名':
				currentProp.value = 'userName'
				break
		}
		inputDialog.value.open()
	}

	const dialogInputConfirm = async () => {
		const {
			userId
		} = uni.getStorageSync('userInfo')
		const data = {
			userId,
			[currentProp.value]: value.value
		}
		console.log(data);
		const encryptStr = rsaEncrypt(data)
		// 清空输入框
		value.value = ''
		if (flag.value === 0) {
			// 安全信息
			await reqUpdateSafeInfo(encryptStr)
		} else {
			// 普通信息
			await reqUpdateCommonInfo(encryptStr)
		}
		// 重新调用详情接口
		getDetail()
	}

	const closeClick = () => {
		value.value = ''
	}

	const onSelect = async (e) => {
		console.log(e);
		const token = uni.getStorageSync('token')
		uni.uploadFile({
			url: 'https://www.cyljx.xyz/file/uploadImage', //仅为示例，非真实的接口地址
			filePath: e.tempFilePaths[0],
			name: 'file',
			formData: {
				file: e.tempFiles[0].file //你要传的临时文件
			},
			header: {
				[token.name]: token.value
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});

		// await reqUploadImg(formData)
	}
</script>

<style lang="scss">
	.headPortrait {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>